import React, { Component } from 'react';
import '../homepage.scss'
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
class RingChart extends Component {
    state = {

    }
    componentDidMount() {
        let barChart = echarts.init(document.getElementById('ring'));
        barChart.setOption({
            color: ['#108CEE', '#545FC8', '#F38900'],
            tooltip: {
                trigger: 'item',
            },
            legend: {
                show: true,
                orient: 'vertical',
                data: ['库表交换', '文件交换', '接口交换'],
                textStyle: {
                    color: ['#108CEE', '#545FC8', '#F38900']
                },
                itemWidth: 8,
                itemHeight: 8,
                top: '30%',
                right: '10%'

            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '80%'],
                    label: {
                        show: false,
                        position: 'center'
                    },
                    roam: false,
                    scaleLimit: {
                        min: 1,
                        max: 2
                    },
                    emphasis: {
                        label: {
                            show: false,
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 123, name: '库表交换' },
                        { value: 88, name: '文件交换' },
                        { value: 129, name: '接口交换' },
                    ],
                    center: ['35%', '50%']
                }
            ]
        })
    }
    render() {
        return (
            <div id="ring"></div>
        )
    }
}
export default RingChart;